<template>
  <div class="app">
    <main>
      <component :is="list[activeIndex].component"></component>
    </main>
    <footer>
      <span 
        v-for="(v, i) in list" 
        :key="i" 
        :class="activeIndex === i ? 'active': ''"
        @click="activeIndex=i"
      >{{ v.name }}</span>
    </footer>
  </div>
</template>

<script>
import Home from '@/components/Home/indexView.vue'
import Classify from '@/components/Classify/indexView.vue'
import Cart from '@/components/Cart/indexView.vue'
import My from '@/components/My/indexView.vue'
export default {
  data() {
    return {
      list: [{
        name: '首页',
        component: Home
      }, {
        name: '分类',
        component: Classify
      }, {
        name: '购物车',
        component: Cart
      }, {
        name: '我的',
        component: My
      }],
      activeIndex: 0
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;

  main {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
  }

  footer {
    border-top: 1px solid #ccc;
    height: 46px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .active {
      color: red;
      font-weight: bold;
    }
  }
}
</style>